<%@ include file="/common/taglibs.jsp"%>
<head>
	<link rel="stylesheet" type="text/css" href="<c:url value='/styles/filter.css'/>" />
	<script src="<c:url value="/scripts/openlayers/OpenLayers.js"/>"></script>
	<meta name="menu" content="filter"/>
	<script>
		
		$(document).ready(function(){
			$("#groups ul").hide(0);
		    $("#groups div.group").click (
		      function () {
		      	$("ul", this).slideToggle("fast");
		      	$("div div", this).toggle(0);
		      } 
		    );    
		});
		
		
		function addCriteria(criteriaType) {
			var url = '<c:url value="/filter/criteria.html"/>';
			var params = { 'criteriaType':criteriaType};
			$.get(url, params, function(data) {
				$("<li/>")
					.attr("class","criteria")
					.prepend(data)
					.prependTo($("#criterion ul")[0]);
				// just for test now... this is not the right place for this - need a callback
				
				if (criteriaType==2)
					initMap();
			});
			
		}
		
		function initMap() {
            var map = new OpenLayers.Map('map', {'maxResolution': 1.40625/2});

            var ol_wms = new OpenLayers.Layer.WMS( "World Map", 
              "http://labs.metacarta.com/wms/vmap0?", {layers: 'basic', format: 'image/png' } );
            map.addLayers([ol_wms]);
            map.addControl(new OpenLayers.Control.LayerSwitcher());
            map.zoomToMaxExtent();
		}
	</script>	
</head>
<body>
	<h1>Define your search criterion...</h1>
	<p>Select from the filters on the left to create your search</p>
	<div id="search">
		<div id="groups">
			<h1>Filters</h1>
			<div class="group">
				<div class="label">
					<div class="arrow"><img src='<c:url value="/images/arrow_right.png"/>'/></div>
	    			<div class="arrow" style="display:none"><img src='<c:url value="/images/arrow_down.png"/>'/></div>					
					<label>Identification</label>
				</div>
				<ul>
					<li>Scientific Name <a href="javascript:addCriteria(0)">Add</a></li>
					<li>Common Name <a href="javascript:addCriteria(1)">Add</a></li>
					<li>Taxonomy
						<ul class="subMenu">
							<li>ITIS <a href="javascript:addCriteria(3)">Add</a><br/>
								<span class="faint">(updated 3 days ago)</span> </li>
							<li>Catalogue of Life Annual Checklist (2009) <a href="javascript:addCriteria(3)">Add</a><br/>
								<span class="faint">(updated 3 months ago)</span> </li>
						</ul>
					</li>
				</ul>
			</div>
			<div class="group">
				<div>
					<div class="arrow"><img src='<c:url value="/images/arrow_right.png"/>'/></div>
	    			<div class="arrow" style="display:none"><img src='<c:url value="/images/arrow_down.png"/>'/></div>					
					<label>Geospatial</label>
				</div>
				<ul>
					<li>Polygon <a href="javascript:addCriteria(2)">Add</a></li>
				</ul>
			</div>
		</div>
		<div id="criterion">
			<h1>Your search criterion</h1>
			<ul class="criterion">
				
			</ul>
		</div>
	</div>
</body>